import React from 'react'
import { connect } from 'dva'
import { routerRedux } from 'dva/router'
import { Form, Input, Select, Button, DatePicker } from 'antd';
import moment from 'moment';
import TableList from './component/TableList'
import DateSearch from '../../../components/DateSearch/index'
import styles from './index.less'

const FormItem = Form.Item;
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;


const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 }
};

@Form.create()
@connect(({ chargeList, loading }) => ({
  chargeList,
  loading: loading.models.chargeList,
}))


export default class List extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      pageSize: 1,
      dateStrings: [],
      filter: {
        consumerName: '',
        beginTime: '',
        endTime: '',
        index: 1,
      },
    }
  }

  onHandlePage = (page) => {
    this.setState({ pageSize: page })
    const { pageSize, filter } = this.state
    this.props.dispatch({
      type: "chargeList/RechargeListPageSearch",
      payload: {
        ...filter,
        index: page,
      }
    })
  }

  onChangeDate = (dateStrings) => {
    this.setState({ dateStrings })
  }

  onSearch = () => {
    const { getFieldValue } = this.props.form
    const { pageSize, dateStrings } = this.state
    let consumerName = getFieldValue("vipName") || '';
    let beginTime = '', endTime = '';
    if (dateStrings.length) {
      beginTime = dateStrings.length && dateStrings[0];
      endTime = dateStrings.length && dateStrings[1];
    }
    this.setState({
      filter: {
        consumerName,
        beginTime,
        endTime,
        index: 1,
      }
    })
    this.props.dispatch({
      type: "chargeList/RechargeListSearch",
      payload: {
        consumerName,
        beginTime,
        endTime,
        index: 1,
      }
    })

  }


  render() {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const { RehargeItem } = this.props.chargeList
    const { dateStrings } = this.state;
    const { loading } = this.props;
    return (
      <div className={styles.chargelist}>
        <Form layout="inline" style={{ marginBottom: '20px' }} >
          <FormItem>
            {getFieldDecorator('vipName')(
              <Input size="large" placeholder="请输入会员名称" style={{ width: '200px' }} />
            )}
          </FormItem>
          <FormItem>
            <DateSearch onChangeDate={this.onChangeDate} />
          </FormItem>
          <FormItem style={{ marginLeft: '150px' }}>
            <Button type="primary" size="large" onClick={this.onSearch} >
              搜索
            </Button>
          </FormItem>
        </Form>
        <div className={styles.tablelist}>
          <TableList
            RehargeItem={RehargeItem}
            loading={loading}
            onHandlePage={this.onHandlePage} />
        </div>
      </div>
    );
  }
};

